import React, {Component} from "react";
import {Form, Tag, Table, Icon} from "antd";
import Menu from "./Menu";
import {taskGetStepTwoDetail} from "../../../services/api";

import "../Task.less";

/* 排班制---出勤班次
 */
const columns = [
  {
    title: "",
    key: "1",
    render: (text, record, index) => {
      return <span>{index + 1 < 10 ? '0' + (index + 1) : index + 1}</span>;
    }
  },
  {
    title: "班次名称",
    dataIndex: "shiftName",
    key: "2",
    render:(text) => {
      return <div dangerouslySetInnerHTML={{__html: text}}/>
    }
  },
  {
    title: "时间安排",
    dataIndex: "shiftRuleTime",
    key: "3",
    render:(text) => {
      return <div dangerouslySetInnerHTML={{__html: text}}/>
    }
  }
];

/* 排班制---周期性排班设置
 */
const columns1 = [
  {
    title: "",
    key: "1",
    render: (text, record, index) => {
      return <span>{index + 1 < 10 ? '0' + (index + 1) : index + 1}</span>;
    }
  },
  {
    title: "周期名称",
    dataIndex: "cycleName",
    key: "2",
    render:(text) => {
      return <div dangerouslySetInnerHTML={{__html: text}}/>
    }
  },
  {
    title: "周期天数",
    dataIndex: "cycleDays",
    key: "3",
    render: (text, record, index) => {
      return <span>{text}天</span>;
    }
  },
  {
    title: "启用班次",
    dataIndex: "shiftNameStr",
    key: "4",
    render:(text) => {
      return <div dangerouslySetInnerHTML={{__html: text}}/>
    }
  }
];

/* 排班制---根据地点出出勤签到
*/
const columns2 = [
  {
    title: "出勤地点",
    dataIndex: "address",
    key: "1"
  }
];


/* 出勤类型:固定班制---出勤班次：
*/
const columns4 = [
  {
    title: "工作日",
    dataIndex: "weekDay",
    key: "weekDay",
  },
  {
    title: "班次详情",
    dataIndex: "shiftDetails",
    key: "shiftDetails",
    render:(text) => {
      return <div dangerouslySetInnerHTML={{__html: text}}/>
    }
  }
];

/* 出勤类型:固定班制---根据地点出出勤签到：
 */
const columns5 = [
  {
    title: "出勤地点",
    dataIndex: "address",
    key: "address",
    render:(text) => {
      return <div dangerouslySetInnerHTML={{__html: text}}/>
    }
  }
];

@Form.create()
export default class TaskDetailBasicInfomation extends Component {
  state = {
    comTaskId: this.props.comTaskId,
    displayShifts: true,//显示排班制还是固定班制(true显示排班制，fasle显示固定班制)
    GDBZ: {},//固定班制
    PBZ: {},//排班制
    ISNEW: '0',//是否是新增（1是新增的，0是修改的）
    canEdit: '0',//是否可以修改（0全部不可修改，1全部可以修改，2部分可以修改)
    attendType: '',//考勤类型
    addressRange_PBZ: '',//出勤地点有效范围
    addressRange_GDBZ: '',//出勤地点有效范围
    selectedTags: [],
  };

  componentDidMount() {
    this.attendanceRules();
  }

  /* 出勤规则 */
  attendanceRules = () => {
    taskGetStepTwoDetail({comTaskId: this.state.comTaskId}).then((data) => {
      console.log('出勤规则', data.data);
      if (data.data) {
        this.setState({
          GDBZ: data.data.GDBZ || {},
          PBZ: data.data.PBZ || {},
          ISNEW: data.data.ISNEW || '',
          canEdit: data.data.canEdit || '',
          attendType: data.data.attendType || '',
        });
        if (data.data.GDBZ !== '') {
          this.setState({
            displayShifts: false,
            addressRange_GDBZ: data.data.GDBZ.returnComTaskAttendAddressList[0].addressRange || ''
          })
        }
        if (data.data.PBZ !== '') {
          this.setState({
            displayShifts: true,
            addressRange_PBZ: data.data.PBZ.returnComTaskAttendAddressList[0].addressRange || ''
          })
        }
      }
    }).catch(err => {
    })
  };

  //排班制的出勤班次
  renderPaiAttendanceShifts = () => {
    let wed = [];
    if (this.state.PBZ.comShifts) {
      wed = this.state.PBZ.comShifts;
    }

    let tmp = wed.map((val, i) => {
      val.key = i + 1;
      return val;
    });
    return (
      <Table
        size="middle"
        dataSource={tmp}
        pagination={false}
        columns={columns}
      />)
  };

  //排班制的周期性排班设置
  renderPaiRecurringSchedule = () => {
    let wed = [];
    if (this.state.PBZ.returnComTaskSchedulCycleList) {
      wed = this.state.PBZ.returnComTaskSchedulCycleList;
    }

    let tmp = wed.map((val, i) => {
      val.key = i + 1;
      return val;
    });
    return (
      <Table
        size="middle"
        dataSource={tmp}
        pagination={false}
        columns={columns1}
      />
    )
  };

  //排班制的出勤地点
  renderPaiAttendanceLocation = () => {
    let wed = [];
    if (this.state.PBZ.returnComTaskAttendAddressList) {
      wed = this.state.PBZ.returnComTaskAttendAddressList;
    }

    let tmp = wed.map((val, i) => {
      val.key = i + 1;
      return val;
    });

    return (
      <Table
        size="middle"
        dataSource={tmp}
        pagination={false}
        columns={columns2}
      />
    )
  };

  //固定班制的出勤班次
  renderGuAttendanceShifts = () => {
    let wed = [];
    if (this.state.GDBZ.returnComTaskFixedDList) {
      wed = this.state.GDBZ.returnComTaskFixedDList;
    }
    console.log('wedwed',wed);
    let tmp = wed.map((val, i) => {
      val.key = i + 1;
      return val;
    });
    return (
      <Table
        size="middle"
        dataSource={tmp}
        pagination={false}
        columns={columns4}
      />
    )
  };

  //固定班制的出勤地点
  renderGuAttendanceLocation = () => {
    let wed = [];
    if (this.state.GDBZ.returnComTaskAttendAddressList) {
      wed = this.state.GDBZ.returnComTaskAttendAddressList;
    }

    let tmp = wed.map((val, i) => {
      val.key = i + 1;
      return val;
    });

    return (
      <Table
        size="middle"
        dataSource={tmp}
        pagination={false}
        columns={columns5}
      />
    )
  };

  render() {
    return (
      <div className="TaskDetail">

        {this.state.displayShifts === true ? <div>
          <div className="title">出勤类型：排班制</div>
          <div className="tablebox">
            <span className="label">出勤班次：</span>
            {this.renderPaiAttendanceShifts()}
          </div>
          <div className="tablebox">
            <span className="label">周期性排班设置</span>
            <div className="exclamation-title">
            <span className="exclamation">
              <Icon type="exclamation-circle"/>说明：周期用于快速排班，按周期快速安排
            </span>
            </div>
            {this.renderPaiRecurringSchedule()}
          </div>
          <div className="title">出勤地点</div>
          <div className="tablebox">
            <div style={{height: '24px'}}>
              <span className="label">根据地点出勤签到:</span>
              <span>有效范围：{this.state.addressRange_PBZ}米</span>
            </div>
            {this.renderPaiAttendanceLocation()}
          </div>
        </div> : <div>
          <div className="title">出勤类型：固定班制</div>
          <div className="tablebox">
            <span className="label">出勤班次：</span>
            {this.renderGuAttendanceShifts()}
          </div>
          <div className="title">出勤地点</div>
          <div className="tablebox">
            <div style={{height: '24px'}}>
              <span className="label">根据地点出勤签到:</span>
              <span>有效范围：{this.state.addressRange_GDBZ}米</span>
            </div>
            {this.renderGuAttendanceLocation()}
          </div>
        </div>}

        {/*<div className="title">出勤类型：自由班制</div>*/}
        {/*<div className="tablebox">*/}
        {/*<span className="label">出勤班次：</span>*/}
        {/*<div className="exclamation-title">出勤起点:{startTime}</div>*/}
        {/*<div className="weekDays">*/}
        {/*{weekDays.map((val, index) => {*/}
        {/*return <span key={index}>{weekend[val]}</span>;*/}
        {/*})}*/}
        {/*</div>*/}
        {/*</div>*/}
      </div>
    );
  }
}
